<template>
	<!--收货地址管理-->
	<view class='address-lists-containter'>
		<block v-if="addLists.length === 0">
			<!--收货地址为空时-->
			<view class="empty">
				<image class="empty_icon" src="../../static/img/common/icon_address.png" />
				<view class="empty_tips">您还没有收货地址哦</view>
			</view>
		</block>
		<block v-else>
			<scroll-view class="address-item-wrap" scroll-y="true" bind:scrolltolower="scrollToBottom">
				<block v-for="(item, index) in addLists" :key="index">
					<view class='address-item-containter' @longtap="isDel(item)">
						<view class="left" @tap="onSelect(item)">
							<view class="tips">
								<view class="tips_top">
									{{ item.receiverName }}, {{ item.receiverTel }}
									<view class="tips_default" v-if="item.defaultType === 1">[ 默认 ]</view>
								</view>
								<view class="tips_bottom">
									收货地址：{{ formatAddress(item) }}
								</view>
							</view>
						</view>
						<!-- <icon class="icon_delete" color="red" type="cancel" size="22" /> -->
						<image class="icon_mod" @tap="onMod(item)" src="../../static/img/common/icon_mod.png" />
					</view>
				</block>
			</scroll-view>
		</block>
		<!--新增收货地址-->
		<view class="button_2 btn_add" @tap="onAddAddress">新增收货地址</view>
	</view>
</template>

<script>
	import {
		deleteAddress,
		getAllAddress
	} from '../../api/address.js';
	import {
		common
	} from '../../services/index.js';
	import {
		navigateBack,
		navigateTo,
		showModal
	} from '../../utils/promise.js';
	export default {
		data() {
			return {
				readOnly: true, //是否可以编辑
				addLists: [], //已添加的地址列表
				selectedAddress: {}, //选择的地址
				from: undefined,
			}
		},
		computed: {
			formatAddress() {
				return (item) => {
					const fullAddress = item.receiverProvince + item.receiverCity + item.receiverArea + item.receiverAddress;
					return fullAddress.length > 18 ? fullAddress.substring(0, 18) + '...' : fullAddress;
				}
			}
		},
		mounted() {},
		onLoad() {

		},
		methods: {
			addressQuery() {
				getAllAddress().then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						this.addLists = data
					}
				})
			},
			onLoad(params) {
				this.from = params.from;
				// let data = getPageData();
				// this.setData({
				//     readOnly: !data.readOnly
				// })
			},
			onShow() {
				this.addressQuery();
			},
			//刷新页面
			refresh() {},
			//添加收获地址
			onAddAddress() {
				navigateTo({
					url: "/pages/addressEdit/index"
				})
			},
			//确认收货地址
			onSelectAddress() {
				if (Object.keys(this.data.selectedAddress).length === 0) {
					showTxtToast('请选择收货地址');
					return false;
				}
				setHashData({
					selectedAddress: this.data.selectedAddress
				});
				navigateBack()
			},
			onSelect(item) {
				if (this.from === 'orderConfirm') {
					uni.setStorageSync('selectAddressId', item.receiverId);
					navigateBack()
				}
				if (this.from === 'changeAddress') {
					uni.setStorageSync('selectAddressIdChange', item.receiverId);
					navigateBack()
				}
				//  this.triggerEvent('selectStatusChange', this.data.obj);
			},
			/**
			 * 修改
			 */
			onMod(item) {
				navigateTo({
					url: '/pages/addressEdit/index?receiverId=' + item.receiverId,
				})
			},
			isDel(item) {
				showModal({
					title: "删除确认",
					content: `是否确认删除${item.receiverProvince}${item.receiverCity}${item.receiverArea}${item.receiverAddress}`,
					showCancel: true,
					cancelText: "否",
					confirmText: "是"
				}).then((res) => {
					if (res.cancel) {
						return
					}
					let params = {
						receiverId: item.receiverId
					}
					deleteAddress(params).then((res) => {
						const {
							code,
							data,
							msg
						} = res
						if (code === 200) {
							uni.showToast({
								title: "删除成功"
							}).then(() => {
								setTimeout(() => {
									this.addressQuery();
								})
							})
							return
						}
						uni.showToast({
							title: "删除失败, 请重试"
						})
					}).catch((err) => {
						console.log(err)
						uni.showToast({
							title: "删除失败, 请重试"
						})
					})
				})
			}
		}
	}
</script>

<style scoped>
	.address-lists-containter {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.empty {
		margin-top: 50rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.empty_icon {
		margin-top: 20rpx;
		width: 130rpx;
		height: 170rpx;
	}

	.empty_tips {
		margin-top: 50rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.btn_add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
	}

	.button_2 {
		background: #0F4C97;
		font-size: 30rpx;
	}

	.address-item-wrap {
		height: calc(100% - 100rpx);
	}

	.panel {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.input {
		height: 440rpx;
		background: #fff;
	}

	.address-item-containter {
		position: relative;
		width: 95%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.left {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.tips {
		width: 90%;
	}

	.tips_top {
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
	}

	.tips_default {
		margin-left: 15rpx;
		display: inline;
		color: rgba(242, 85, 0, 1);
	}

	.tips_bottom {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: rgba(85, 85, 85, 1);
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.icon_flag {
		margin-right: 30rpx;
		width: 26rpx;
		height: 26rpx;
	}

	.icon_mod {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
		padding: 30rpx;
	}


	.address-add-containter {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.add-container {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		margin-top: 30rpx;
	}

	.row_name {
		margin-top: 20rpx;
	}

	.panel {
		background: #fff;
		height: 440rpx;
		width: 100%;
		margin-bottom: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>